<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="auto" content='homo'>
	<meta charset="UTF-8">
	<title>旅行社 -订购</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/information.css">
	<link rel="stylesheet" type="text/css" href="css/buy.css">
	<script>
		function isChinese(input) {
			var pattern = /^[\u4e00-\u9fa5]+$/;
			return pattern.test(input);
		}
		function validateinput1() {
			var userinput = document.getElementById('gocity1').value;
			var userinput1 = document.getElementById('comecity1').value;
			if(userinput == "" || userinput1 == ""){
				alert("请输入城市名！");
				return false;
			}
			if(userinput == userinput1){
				alert("出发城市和返回城市不能相同！");
				return false;
			}
			if (!isChinese(userinput&&userinput1)) {
				alert("请输入正确的中文城市名！");
				return false;
			} else {
				alert("订票成功！");
				return true;
			}
			document.getElementById('gocity1').value = "";
			document.getElementById('comecity1').value = "";
		}
		function validateinput2() {
			var userinput = document.getElementById('gocity2').value;
			var userinput1 = document.getElementById('comecity2').value;
			if(userinput == "" || userinput1 == ""){
				alert("请输入城市名！");
				return false;
			}
			if(userinput == userinput1){
				alert("出发城市和返回城市不能相同！");
				return false;
			}
			if (!isChinese(userinput && userinput1)) {
				alert("请输入正确的中文城市名！");
				return false;
			} else {
				alert("订票成功！");
				return true;
			}
			document.getElementById('gocity2').value = "";
			document.getElementById('comecity2').value = "";
		}
	</script>
	


</head>

<body>
	<header id='header'>
		<div class='center'>
			<nav style='overflow:hidden;'>
				<h2 class="none">网站导航</h2>
				<ul class="link">
					<li><a href="index.html"> 首页</a></li>
					<li><a href="information.html">旅行信息</a></li>
					<li class="active"><a href="#">订购</a></li>
					<li><a href="scenery.html">风景欣赏</a></li>
					<li><a href="login.html">登录</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div id="headline">
		<div class="center">
			<hgroup>
				<h2>出行订购</h2>
				<h3>特价机票，火车票</h3>
			</hgroup>
		</div>
	</div>
	<div id="containter">
		<div class="list  airTicket">
			<h2>汽车票预订</h2>
			<hr>
			<form class="fo" action="#" method="post">
				<ul class="fo_first">
					<li>车票类型</li>
					<li><input type="radio" id="one" name="type" value="one">
						<label for="one">单程</label>
					</li>
					<li><input type="radio" id="two" name="type" value="two">
						<label for="two">往返</label>
					</li>
				</ul>
				<ul class="fo_city">
					<li><label for="gocity1">出发城市</label></li>
					<li><input type="text" id="gocity1" placeholder='城市名' /></li>
					<li class="goTime"><label for="gotime">出发时间</label></li>
					<li><input type="text" id="gotime" placeholder='时间/日期'></li>
				</ul>
				<ul class="come_city">
					<li><label for="comecity1">返回城市</label></li>
					<li><input type="text" id='comecity1' placeholder='城市名' /></li>
					<li class="goTime"><label for="cometime">返回时间</label></li>
					<li><input type="text" id="cometime" placeholder='时间/日期'></li>
				</ul>
				<div class="submit">
					<button type="submit" onclick="validateinput1()">订票</button>
				</div>
			</form>
			<h2>火车票预订</h2>
			<hr>
			<form class="fo" action="#" method="post">
				<ul class="fo_first">
					<li>车票类型</li>
					<li><input type="radio" id="one" name="type" value="one">
						<label for="one">单程</label>
					</li>
					<li><input type="radio" id="two" name="type" value="two">
						<label for="two">往返</label>
					</li>
				</ul>
				<ul class="fo_city">
					<li><label for="gocity2">出发城市</label></li>
					<li><input type="text" id="gocity2" placeholder='城市名' /></li>
					<li class="goTime"><label for="gotime">出发时间</label></li>
					<li><input type="text" id="gotime" placeholder='时间/日期'></li>
				</ul>
				<ul class="come_city">
					<li><label for="comecity2">返回城市</label></li>
					<li><input type="text" id='comecity2' placeholder='城市名' /></li>
					<li class="goTime"><label for="cometime">返回时间</label></li>
					<li><input type="text" id="cometime" placeholder='时间/日期'></li>
				</ul>
				<div class="submit">
					<button type="submit" onclick="validateinput2()">订票</button>
				</div>
			</form>
					<h2>机票预定</h2>
					<hr>
					<form id="searchForm">
						<input type="text" id="keyword" placeholder="请输入关键字搜索...">
						<input type="submit" value="搜索">
					</form>
					
					<table id="ticketTable">
						<tr>
							<th>航班号</th>
							<th>起飞时间</th>
							<th>出发地点</th>
							<th>目的地</th>
							<th>价格</th>
							<th>操作</th>
						</tr>
						<tr>
							<td>C123</td>
							<td>08:00</td>
							<td>北京</td>
							<td>上海</td>
							<td>$200</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>D456</td>
							<td>10:30</td>
							<td>上海</td>
							<td>北京</td>
							<td>$180</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>F789</td>
							<td>12:45</td>
							<td>广州</td>
							<td>深圳</td>
							<td>$220</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>G332</td>
							<td>09:15</td>
							<td>深圳</td>
							<td>广州</td>
							<td>$250</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>H567</td>
							<td>11:00</td>
							<td>成都</td>
							<td>重庆</td>
							<td>$230</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>K987</td>
							<td>13:20</td>
							<td>重庆</td>
							<td>成都</td>
							<td>$210</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>C123</td>
							<td>08:00</td>
							<td>北京</td>
							<td>上海</td>
							<td>$200</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>D456</td>
							<td>10:30</td>
							<td>上海</td>
							<td>北京</td>
							<td>$180</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>F789</td>
							<td>12:45</td>
							<td>广州</td>
							<td>深圳</td>
							<td>$220</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>G332</td>
							<td>09:15</td>
							<td>深圳</td>
							<td>广州</td>
							<td>$250</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>G332</td>
							<td>09:15</td>
							<td>深圳</td>
							<td>广州</td>
							<td>$250</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>H567</td>
							<td>11:00</td>
							<td>成都</td>
							<td>重庆</td>
							<td>$230</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
						<tr>
							<td>K987</td>
							<td>13:20</td>
							<td>重庆</td>
							<td>成都</td>
							<td>$210</td>
							<td><button onclick="alert('订票成功！')">订票</button></td>
						</tr>
					</table>
					<h3>更多机票请到<a href="https://flights.ctrip.com/online/channel/domestic">机票预订</a></h3>
				</div>
				<script>
					const form = document.getElementById('searchForm');
					const table = document.getElementById('ticketTable');
					const keywordInput = document.getElementById('keyword');
				
					form.addEventListener('submit', function(event) {
						event.preventDefault();
						
						const keyword = keywordInput.value.toUpperCase();
						const rows = table.getElementsByTagName('tr');
				
						for (let row of rows) {
							const cells = row.getElementsByTagName('td');
							let found = false;
				
							for (let cell of cells) {
								if (cell.textContent.toUpperCase().indexOf(keyword) > -1) {
									found = true;
									break;
								}
							}
				
							if (found) {
								row.style.display = '';
							} else {
								row.style.display = 'none';
							}
						}
					});
				</script>
			</div>
		</div>
	</div>
	<footer id='foot'>
		<div>
			<h1>联系我们</h1>
			<p>电话：13181928266</p>
			<p>邮箱：1501918713@qq.com</p>
			<p>地址：山东省青岛市崂山区青岛大学金家岭校区</p>
		</div>
	</footer>
</body>

</html>